<template>
    <div :style="style" class="wjy-flow__node" :data-id="$attrs.dataId">
        <slot></slot>
    </div>
</template>
  
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'

const props = defineProps({
    position: Object,
})

const style = computed(() => {
    const {  x, y } = props.position
    return {
        transform: `translate(${x}px, ${y}px)`
    }
})

const nodeInfo = reactive({
    name: 'node1', // 节点名称、也是组件名称
    position: {
        x: 100,
        y: 100
    },
})
</script>

<style scoped lang="scss">
.wjy-flow__node {
    width: fit-content;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    user-select: none;
    cursor: grab;
    // will-change: transform;
    visibility: visible;
    position: absolute;
    z-index: 0;
}
</style>